<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
        <li><el-button size="mini" type="primary" @click="handleSubmit">保存</el-button></li>
      </ul>
    </div>
    <el-form ref="form" :model="data" :rules="rules" :inline="true" label-width="125px" size="mini">
      <!--折叠面板-->
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="basicInfo">
          <template slot="title">
            <span>基本信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="6">
              <el-form-item label="承运人名称：">
                <el-input v-model="data.carrierName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承运人简称：">
                <el-input v-model="data.carrierForShortName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承运人编码：">
                <el-input v-model="data.id" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调度部门：">
                <el-input v-model="data.orgName" class="filter-item" disabled>
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="openOrgSelector" />
                </el-input>
                <org-selector :visible.sync="orgSelectorVisible" @selected="handleOrgSelected" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="6">
              <el-form-item label="电话：">
                <el-input v-model="data.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地址：">
                <el-input v-model="data.address" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="网址：">
                <el-input v-model="data.webUrl" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户行：">
                <el-input v-model="data.openAccountBank" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="6">
              <el-form-item label="银行卡号：">
                <el-input v-model="data.accountsOfBank" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="otherInfo">
          <template slot="title">
            <span>其它信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="10">
              <el-form-item label="备注：">
                <el-input v-model="data.remark" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-input v-model="data.orgId" type="hidden" />
    </el-form>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConstant from '@/constant/AppConstant'
import CarrierApi from '@/api/basic/CarrierApi'
import OrgSelector from '../../system/org/OrgSelector'

export default {
  directives: {
    waves
  },
  components: {
    OrgSelector
  },
  data() {
    return {
      activeNames: [
        'basicInfo',
        'otherInfo'],
      selects: {
        ynTypeList: appConstant.ynTypeList
      },
      operation: undefined,
      data: {
        isValid: appConstant.Y
      },
      // 校验规则的名称必须和校验字段的名称一致
      rules: {},
      orgSelectorVisible: false
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
  },
  methods: {
    initForm() {
      const id = this.$route.params.id
      if (id) {
        this.operation = 'edit'
        CarrierApi.get(id).then(response => {
          this.data = response.data
        })
      } else {
        this.operation = 'add'
      }
    },
    loadSelects() {
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.operation === 'add') {
            CarrierApi.add(this.data).then(response => {
              this.$message.success('新增成功！')
              this.$router.go(-1)
            })
          } else if (this.operation === 'edit') {
            CarrierApi.edit(this.data).then(response => {
              this.$message.success('编辑成功！')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    handleCancel() {
      this.$router.go(-1)
    },
    handleChange(val) {
      console.log(val)
    },
    openOrgSelector() {
      this.orgSelectorVisible = true
    },
    handleOrgSelected(obj) {
      this.data.orgId = obj.id
      this.data.orgName = obj.orgName
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
